import { QuestionCircleFilled } from "@ant-design/icons"
import { Tooltip } from "antd"
import { ColumnGroupType, ColumnType } from "antd/es/table"
import styled from "styled-components"

export const StyledParagraph = styled.p<{ $isCurved: boolean }>`
	color: ${props => props.color || ""}; /* Default color is black */
	${props => (props.$isCurved ? "background: rgba(0, 160, 0, 0.2);" : "")}
	${props => (props.$isCurved ? "width: 50px;" : "")}
	${props => (props.$isCurved ? "display: inline-block;" : "")}
	${props => (props.$isCurved ? "border-radius: 25px;" : "")}
`

export const renderNullableValue = (field: string, prefix = "", color = "", $isCurved = false, postfix = "") =>
	function ColorTableCell(_text: any, record: any) {
		return (
			<StyledParagraph color={color} $isCurved={$isCurved}>
				{!!record?.[field] && typeof record?.[field] === "number" && record?.[field] < 0 ? "-" : ""}
				{!!record?.[field] || record?.[field] === 0 ? prefix : ""}
				{!!record?.[field] || record?.[field] === 0
					? typeof record[field] === "number"
						? Math.abs(record[field])
								.toString()
								.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
						: record[field]
					: "-"}
				{!!record?.[field] || record?.[field] === 0 ? postfix : ""}
			</StyledParagraph>
		)
	}

const venueProfitAndLoss = (newFormat: (arg: string) => string): Record<string, ColumnGroupType<any> | ColumnType<any>> => ({
	venueVenueName: {
		key: "venueName",
		dataIndex: "venueName",
		width: 120,
		render: renderNullableValue("venueName"),
		title: newFormat("report.venue_name"),
		align: "center",
		fixed: false
	},
	venueVenueTypeName: {
		key: "venueTypeName",
		dataIndex: "venueTypeName",
		width: 120,
		render: renderNullableValue("venueTypeName"),
		title: newFormat("report.venue_type_name"),
		align: "center",
		fixed: false
	},
	venueMemberCount: {
		key: "memberCount",
		dataIndex: "memberCount",
		width: 120,
		render: renderNullableValue("memberCount"),
		title: newFormat("report.member_count"),
		align: "center",
		fixed: false,
		sorter: (a, b) => a.memberCount - b.memberCount
	},
	venueBetCount: {
		key: "betCount",
		dataIndex: "betCount",
		width: 120,
		render: renderNullableValue("betCount"),
		title: newFormat("report.bet_count"),
		align: "center",
		fixed: false,
		sorter: (a, b) => a.betCount - b.betCount
	},
	venueBetAmount: {
		key: "betAmount",
		dataIndex: "betAmount",
		width: 120,
		render: renderNullableValue("betAmount", "$"),
		title: newFormat("report.bet_amount"),
		align: "center",
		fixed: false,
		sorter: (a, b) => a.betAmount - b.betAmount
	},
	venueServiceAmountContribution: {
		key: "serviceAmountContribution",
		dataIndex: "serviceAmountContribution",
		width: 120,
		render: renderNullableValue("serviceAmountContribution", "$"),
		title: newFormat("report.service_amount_contribution"),
		align: "center",
		fixed: false,
		sorter: (a, b) => a.serviceAmountContribution - b.serviceAmountContribution
	},
	venueValidBetAmount: {
		key: "validBetAmount",
		dataIndex: "validBetAmount",
		width: 120,
		render: renderNullableValue("validBetAmount", "$"),
		title: newFormat("report.valid_bet_amount"),
		align: "center",
		fixed: false,
		sorter: (a, b) => a.validBetAmount - b.validBetAmount
	},
	venueValidBetRecalculationAdjustmentAmount: {
		key: "validBetRecalculationAdjustmentAmount",
		dataIndex: "validBetRecalculationAdjustmentAmount",
		width: 120,
		render: renderNullableValue("validBetRecalculationAdjustmentAmount", "$"),
		title: newFormat("report.bet_recalculation"),
		align: "center",
		fixed: false,
		sorter: (a, b) => a.validBetRecalculationAdjustmentAmount - b.validBetRecalculationAdjustmentAmount
	},
	venueRealValidBetAmount: {
		key: "realValidBetAmount",
		dataIndex: "realValidBetAmount",
		width: 120,
		render: renderNullableValue("realValidBetAmount", "$"),
		title: newFormat("report.real_valid_bet_amount"),
		align: "center",
		fixed: false,
		sorter: (a, b) => a.realValidBetAmount - b.realValidBetAmount
	},
	venueNetAmount: {
		key: "netAmount",
		dataIndex: "netAmount",
		width: 120,
		render: renderNullableValue("netAmount", "$"),
		title: newFormat("report.net_amount"),
		align: "center",
		fixed: false,
		sorter: (a, b) => a.netAmount - b.netAmount
	},
	venueNetRecalculationAdjustmentAmount: {
		key: "netRecalculationAdjustmentAmount",
		dataIndex: "netRecalculationAdjustmentAmount",
		width: 120,
		render: renderNullableValue("netRecalculationAdjustmentAmount", "$"),
		title: newFormat("report.net_recalculation_adjustment"),
		align: "center",
		fixed: false,
		sorter: (a, b) => a.netRecalculationAdjustmentAmount - b.netRecalculationAdjustmentAmount
	},
	venueRealNetAmount: {
		key: "realNetAmount",
		dataIndex: "realNetAmount",
		width: 120,
		render: renderNullableValue("realNetAmount", "$"),
		title: newFormat("report.game_real_net_amount"),
		align: "center",
		fixed: false,
		sorter: (a, b) => a.realNetAmount - b.realNetAmount
	},
	venueRealNetRate: {
		key: "realNetRate",
		dataIndex: "realNetRate",
		width: 120,
		render: renderNullableValue("realNetRate", "", "", false, "%"),
		title: () => (
			<p>
				{newFormat("report.venue_real_net_rate")}
				<Tooltip title={newFormat("report.venue_real_net_rate_tips")}>
					<QuestionCircleFilled />
				</Tooltip>
			</p>
		),

		align: "center",
		fixed: false,
		sorter: (a, b) => a.realNetRate - b.realNetRate
	}
})

export default venueProfitAndLoss
